<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
  <!-- BEGIN: Head-->
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="description" content="Materialize is a Material Design Admin Template,It's modern, responsive and based on Material Design by Google.">
    <meta name="keywords" content="materialize, admin template, dashboard template, flat admin template, responsive admin template, eCommerce dashboard, analytic dashboard">
    <meta name="author" content="ThemeSelect">
    <title>生态圈系统-优惠券-按客户发放</title>
    <link rel="icon" th:href="@{/images/favicon.ico}" th:mce_href="@{/images/favicon.ico}" type="image/x-icon">
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}" th:mce_href="@{/images/favicon.ico}" type="image/x-icon">
    <link rel="apple-touch-icon" th:href="@{/images/favicon.ico}" th:mce_href="@{/images/favicon.ico}" type="image/x-icon">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="css/bootstrap.min.css" th:href="@{/css/bootstrap.css}" type="text/css" rel="stylesheet"/>
    <!-- BEGIN: VENDOR CSS-->
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/vendors.min.css" th:href="@{/app-assets/vendors/vendors.min.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/flag-icon/css/flag-icon.min.css" th:href="@{/app-assets/vendors/flag-icon/css/flag-icon.min.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/data-tables/css/jquery.dataTables.min.css" th:href="@{/app-assets/vendors/data-tables/css/jquery.dataTables.min.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css" th:href="@{/app-assets/vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/data-tables/css/select.dataTables.min.css" th:href="@{/app-assets/vendors/data-tables/css/select.dataTables.min.css}">
    <!-- END: VENDOR CSS-->
    <!-- BEGIN: Page Level CSS-->
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/vertical-gradient-menu-template/materialize.css" th:href="@{/app-assets/css/themes/vertical-gradient-menu-template/materialize.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/vertical-gradient-menu-template/style.css" th:href="@{/app-assets/css/themes/vertical-gradient-menu-template/style.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/pages/data-tables.css" th:href="@{/app-assets/css/pages/data-tables.css}">
    <!-- END: Page Level CSS-->
    <!-- BEGIN: Custom CSS-->
    <link href="plugins/bootstrap-datepicker/css/bootstrap-datepicker.css" th:href="@{/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css}" type="text/css" rel="stylesheet"/>
	  <link href="plugins/bootstrap-sweetalert/sweetalert.css" th:href="@{/plugins/bootstrap-sweetalert/sweetalert.css}" type="text/css" rel="stylesheet"/>
	  <link rel="stylesheet" type="text/css" href="../../../app-assets/css/custom/custom.css" th:href="@{/app-assets/css/custom/custom.css}">
    <!-- END: Custom CSS-->
    <style>
      td {
        padding: 0 5px;
      }
      .pagination li a {
        font-size: 1rem;
      }
    </style>
  </head>
  <!-- END: Head-->
  <body class="vertical-layout page-header-light vertical-menu-collapsible vertical-gradient-menu 2-columns" data-open="click" data-menu="vertical-gradient-menu" data-col="2-columns">

    <!-- BEGIN: Header-->
    <div th:replace="common/header :: header"></div>
    <!-- END: Header-->

    <div th:replace="common/aside_admin :: aside"></div>

    <!-- BEGIN: Page Main-->
    <div id="main">
      <div class="row">
        <div class="pt-3 pb-1" id="breadcrumbs-wrapper">
          <!-- Search for small screen-->
          <div class="container">
            <div class="row">
              <div class="col s12 m6 l6">
                <h5 class="breadcrumbs-title mt-0 mb-0" id="page-title" active-menu="coupon-allocate-by-customer-menu">按客户发放</h5>
              </div>
              <div class="col s12 m6 l6 right-align-md hide">
                <ol class="breadcrumbs mb-0">
                  <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                  <li class="breadcrumb-item"><a href="#">Pages</a></li>
                  <li class="breadcrumb-item active">Blank Page</li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        <div class="col s12">
          <div class="container">
            <div class="section section-data-tables">
              <div class="row">
                <div class="col s12 m12 l12">
                  <div id="button-trigger" class="card card card-default scrollspy">
                    <div class="card-content" style="height: 515px;">
                      <div class="row">
                        <div class="col s12">
                          <form id="search">
							              <div class="input-field col s2">
							                <input type="text" name="customerNumber" id="customer_id" th:value="${search.customerNumber}">
							                <label for="customer_id">客户号</label>
							              </div>
							              <div class="input-field col s2">
							                <input type="text" name="nickname" id="nickname_s" th:value="${search.nickname}">
							                <label for="nickname_s">昵称</label>
							              </div>
							              <div class="input-field col s2">
							                <input type="text" name="phone" id="phone_s" th:value="${search.phone}">
							                <label for="phone_s">手机号码</label>
							              </div>
							              <div class="input-field col s2">
							                <select name="customerLevel">
							                  <option value="" selected>客户等级</option>
							                  <option value="1" th:selected="${search.customerLevel} == 1">1</option>
							                  <option value="2" th:selected="${search.customerLevel} == 2">2</option>
							                  <option value="3" th:selected="${search.customerLevel} == 3">3</option>
							                  <option value="4" th:selected="${search.customerLevel} == 4">4</option>
							                </select>
							              </div>
							              <div class="input-field col s1">
							                <a th:href="'javascript:search();'" class="waves-effect waves-light btn-floating search-btn"><i class="material-icons right">search</i></a>
							              </div>
							              <div class="input-field col s3">
							              </div>
                          </form>
                        </div>
                        <div class="col s12">
                          <table>
                            <thead>
                              <tr>
                                <th>客户号</th>
						                    <th>昵称</th>
						                    <th>手机号</th>
						                    <th>客户等级</th>
						                    <th>操作</th>
                              </tr>
                            </thead>
                            <tbody id="customer_tbody">
                              <tr th:each="c : ${customers}" th:id="'customer_row_'+${c.id}" th:attr="customer_id=${c.id}">
					                      <!-- <td>
					                        <label>
					                          <input type="checkbox" checked="checked" />
					                          <span></span>
					                        </label>
					                      </td> -->
					                      <td th:text="${c.customerNumber}" th:title="${c.customerNumber}">1</td>
					                      <td th:text="${c.nickname}" th:title="${c.nickname}">biu~</td>
					                      <td th:text="${c.phone}" th:title="${c.phone}">13111111111</td>
					                      <td th:text="${c.customerLevel}" th:title="${c.customerLevel}">1</td>
					                      <td>
					                        <a th:id="'add_btn_'+${c.id}" th:href="'javascript:addToSelectedDiv(\''+${c.id}+'\');'"><i class="material-icons">add_circle_outline</i></a>
					                      </td>
					                    </tr>
                            </tbody>
                          </table>

                        </div>
                        <div class="col s12">
					                <ul th:if="${customers.totalPages} > 1" class="pagination right" style="bottom: unset;">
					                  <!-- <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
					                  <li class="active"><a href="#!">1</a></li>
					                  <li class="waves-effect"><a href="#!">2</a></li>
					                  <li class="waves-effect"><a href="#!">3</a></li>
					                  <li class="waves-effect"><a href="#!">4</a></li>
					                  <li class="waves-effect"><a href="#!">5</a></li>
					                  <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li> -->
					                </ul>
					              </div>
                      </div>
                    </div>
                    <div class="card-action">
                      <div class="row">
                        <div class="col s3 input-field">
                          <select name="activityId">
                            <option value="" disabled selected>请选择</option>
                            <option th:each="a : ${activities}" th:value="${a.id}"  th:text="${a.title}"></option>
                          </select>
                          <label>权益</label>
                        </div>
                        <div class="col s3 input-field">
                          <input type="number" name="perCustomer" id="perCustomer" min="1">
                          <label for="perCustomer">每客户发放数量</label>
                        </div>
                        <div class="col s3 input-field"></div>
                        <div class="col s3 input-field">
                          <a class="waves-effect waves-light btn light-blue darken-1 right white-text" href="javascript:allocateSubmit();" style="margin-right: 30px;"><i class="material-icons right"></i>发放优惠券</a>
                        </div>
                      </div>
                    </div>
                    <div class="card-action" style="height: 500px;">
                      <div class="row">
                        <div class="col s12">
	                        <table>
	                          <thead>
	                            <tr>
	                              <th>客户号</th>
	                              <th>昵称</th>
	                              <th>手机号</th>
	                              <th>客户等级</th>
	                              <th>操作</th>
	                            </tr>
	                          </thead>
	                          <tbody id="selected_tbody">
	                          </tbody>
	                        </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- END: Page Main-->

    <!-- BEGIN: Footer-->

    <div th:replace="common/footer :: footer"></div>

    <!-- END: Footer-->

	  <div th:replace="common/update_pwd :: #modal3"></div>

    <!-- BEGIN VENDOR JS-->
    <script src="../../../app-assets/js/vendors.min.js" th:src="@{/app-assets/js/vendors.min.js}" type="text/javascript"></script>
    <!-- BEGIN VENDOR JS-->
    <!-- BEGIN PAGE VENDOR JS-->
    <script src="../../../app-assets/vendors/data-tables/js/jquery.dataTables.min.js" th:src="@{/app-assets/vendors/data-tables/js/jquery.dataTables.min.js}" type="text/javascript"></script>
    <script src="../../../app-assets/vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js" th:src="@{/app-assets/vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js}" type="text/javascript"></script>
    <script src="../../../app-assets/vendors/data-tables/js/dataTables.select.min.js" th:src="@{/app-assets/vendors/data-tables/js/dataTables.select.min.js}" type="text/javascript"></script>
    <!-- END PAGE VENDOR JS-->
    <!-- BEGIN THEME  JS-->
    <script src="../../../app-assets/js/plugins.js" th:src="@{/app-assets/js/plugins.js}" type="text/javascript"></script>
    <script src="../../../app-assets/js/custom/custom-script.js" th:src="@{/app-assets/js/custom/custom-script.js}" type="text/javascript"></script>
    <!-- END THEME  JS-->
    <!-- BEGIN PAGE LEVEL JS-->
    <script src="../../../app-assets/js/scripts/data-tables.js" th:src="@{/app-assets/js/scripts/data-tables.js}" type="text/javascript"></script>
    <!-- END PAGE LEVEL JS-->
    <script src="plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" th:src="@{/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js}"></script>
    <script src="plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js" th:src="@{/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js}" charset="UTF-8"></script>
    <script src="plugins/bootstrap-sweetalert/sweetalert.min.js" th:src="@{/plugins/bootstrap-sweetalert/sweetalert.min.js}"></script>
    <script src="js/common.js" th:src="@{/js/common.js}"></script>
    <script src="js/jquery.page.js" th:src="@{/js/jquery.page.js}"></script>
    <script th:inline="javascript">
	    $(".pagination").createPage({
	      pageCount: [[${customers.totalPages}]],
	      current: [[${customers.number}]] + 1,
	      backFn:function(p){
	        window.location.href = "customer?page=" + (p - 1) + "&" + formParamsSerialize($("#search").find('input, select'));
	      }
	    });

	    function search() {
	      console.log($("#search").serialize());
	      window.location.href = "customer?" + formParamsSerialize($("#search").find('input, select'));
	    }

	    function addToSelectedDiv(customerId) {
	      //console.log($('#customer_row_' + customerId));
	      console.log($('#selected_tbody').children('tr').length);
	      if($('#selected_tbody').children('tr').length >= 20) {
	        swal("最多只能选择20个信托客户!", {
	          icon: "error",
	        });
	        return;
	      }
	      var minus_btn_str = '<a id="minus_btn_' + customerId + '" href="javascript:addToCustomerDiv(\'' + customerId + '\');"><i class="material-icons">remove_circle_outline</i></a>'
	      $('#add_btn_' + customerId).replaceWith(minus_btn_str);
	      $('#selected_tbody').append($('#customer_row_' + customerId));
	    }

	    function addToCustomerDiv(customerId) {
	      var add_btn_str = '<a id="add_btn_' + customerId + '" href="javascript:addToSelectedDiv(\'' + customerId + '\');"><i class="material-icons">add_circle_outline</i></a>'
	      $('#minus_btn_' + customerId).replaceWith(add_btn_str);
	      $('#customer_tbody').append($('#customer_row_' + customerId));
	    }

	    function allocateSubmit() {
	      var activityId = $('select[name="activityId"]').val();
	      if(activityId == null || activityId == "") {
	        swal("请选择权益!", {
	          icon: "error",
	        });
	        return;
	      }
	      var perCustomer = $('input[name="perCustomer"]').val();
	      if(perCustomer == null || perCustomer == "") {
	        swal("请输入每客户发放数量!", {
	          icon: "error",
	        });
	        return;
	      }
	      var customerIds = new Array();
	      $('#selected_tbody tr').each(function(i){
	        console.log($(this).attr("customer_id"));
	        customerIds.push($(this).attr("customer_id"));
	      });
	      $.ajax({
	        url: context_path + "/api/v1/coupons/services/allocate/" + activityId + "/by-customer?perCustomer=" + perCustomer,
	        data: "[" + customerIds.toString() + "]",
	        contentType: "application/json;charset=utf-8",
	        type: "POST",
	        headers: {
	          Accept: "application/json"
	        },
	        dataType: "json",
	        success: function(data, textStatus) {
	          //console.log(data);
	          if(data.couponAmount == 0 && data.customerAmount > 0) {
	            swal({
	              title: "发放失败!",
	              text: "共需要 " + (data.customerAmount * data.couponPerCustomer) + " 张优惠券，现有数量不足",
	              icon: "error",
	              //timer: 2000,
	            });
	          } else {
	            swal({
	              title: "发放成功!",
	              text: "共发放" + data.customerAmount + "个客户，每客户" + data.couponPerCustomer + "张，共" + (data.customerAmount * data.couponPerCustomer) + "张",
	              icon: "success",
	              //timer: 2000,
	            });
	          }
	          //window.location.reload();
	          $('#modal1').modal('close');
	        },
	        error: function (data, textStatus, errorThrown) {
	          console.log(data);
	          swal({
	            title: "发放失败!",
	            text: data.responseJSON.message == '' ? "请联系管理员!" : data.responseJSON.message,
	            icon: "error",
	            //timer: 2000,
	          });
	          M.updateTextFields();
	        }
	      });

	    }

	  </script>
  </body>
</html>
